<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script src="./js/template-web.js"></script>
    <!-- <script type="text/html" id="tpl">
        {{each list}}
     {{if $index!==0}} 
       <li>{{$index}} {{$value.name}} ---- {{$value.skill}}--{{@ $value.html }}</li>
        {{/if}} 
        {{/each}}
     </script> -->
    <script type="text/html" id="tpl">
        {{each list}}
       <li>{{$index}} {{$value.name}} ---- {{$value.skill}}--{{@ $value.html }}</li>
        {{/each}}
     </script>
    <script>
        let list = [
            { html: ' <button>黄棵的按钮</button>', name: '黄棵', skill: '跑路' },
            { html: ' <input type="radio" name="we" id="">', name: '孙悟空', skill: '72变' },
            { html: ' <input type="radio" name="we" id="">', name: '猪八戒', skill: '吃肉' },
            { html: ' <input type="radio" name="we" id="">', name: '唐曾', skill: '紧箍咒' },
            { html: ' <input type="radio" name="we" id="">', name: '东皇太一', skill: '隐身' },
            { html: ' <input type="radio" name="we" id="">', name: '芈月', skill: '无敌' },
            { html: ' <input type="radio" name="we" id="">', name: '后羿', skill: '射日' }
        ]
        let html = template('tpl', { list })
        document.querySelector('body').innerHTML = html
    </script>
</body>

</html>